<template>
  <div class="full-screen">
    <!-- <dv-border-box-11 title="大屏展示系统">大屏展示系统</dv-border-box-11> -->
    <!-- <dv-decoration-11 style="width:200px;height:60px;"></dv-decoration-11> -->
    <audio ref="audio" controls v-show="false" autoplay="autoplay" >
      <source src="@/assets/audio/order2.mp3" type="audio/mp3">
    </audio>
    <div class="content1">
      <div class="title">
        <dv-decoration-6 v-if="!isMobile" style="width:300px;height:30px;" />
        <dv-decoration-7 v-if="!isMobile" style="width:500px;height:30px;">&nbsp;&nbsp;&nbsp;&nbsp;领云即开配送大屏展示(体彩中心)&nbsp;&nbsp;&nbsp;&nbsp;</dv-decoration-7>
        <dv-decoration-7 v-if="isMobile" style="width:100%;height:30px;font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;领云即开配送大屏展示(体彩中心)&nbsp;&nbsp;&nbsp;&nbsp;</dv-decoration-7>
        <dv-decoration-6 v-if="!isMobile" style="width:300px;height:30px;" />
      </div>

    </div>

    <div class="content2">
      <div class="con_div">
        <div class="con_div_text left clear">
          <dv-border-box-8 :reverse="true" style="width:100%;">
            <div class="con_div_text01 left">
              <img src="@/assets/images/info_7.png" class="left text01_img" />
              <div class="left text01_div">
                <p>年订票金额</p>
                <p v-if="msgData.summaryData">{{msgData.summaryData.yearOrderTotalAmount || 0}}
                </p>
              </div>
            </div>
            <div class="con_div_text01 right">
              <img src="@/assets/images/info_8.png" class="left text01_img" />
              <div class="left text01_div">
                <p>年订票数量</p>
                <p v-if="msgData.summaryData">{{msgData.summaryData.yearOrderTotalCount || 0}}</p>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <div class="con_div_text left">
          <dv-border-box-8 :reverse="true" style="width:100%;">
            <div class="con_div_text01 left">
              <img src="@/assets/images/info_9.png" class="left text01_img" />
              <div class="left text01_div">
                <p>月订票金额</p>
                <p class="sky" v-if="msgData.summaryData">{{msgData.summaryData.monthOrderTotalAmount || 0}}</p>
              </div>
            </div>
            <div class="con_div_text01 right">
              <img src="@/assets/images/info_10.png" class="left text01_img" />
              <div class="left text01_div">
                <p>月订票数量</p>
                <p class="sky" v-if="msgData.summaryData">{{msgData.summaryData.monthOrderTotalCount || 0}}</p>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <div class="con_div_text left">
          <dv-border-box-8 :reverse="true" style="width:100%;">
            <div class="con_div_text01 left">
              <img src="@/assets/images/info_11.png" class="left text01_img" />
              <div class="left text01_div">
                <p>全年物流(件)</p>
                <p class="org" v-if="msgData.summaryData">{{msgData.summaryData.yearOrderEffectiveCount || 0}}</p>
              </div>
            </div>
            <div class="con_div_text01 right">
              <img src="@/assets/images/info_12.png" class="left text01_img" />
              <div class="left text01_div">
                <p>当月物流(件)</p>
                <p class="org" v-if="msgData.summaryData">{{msgData.summaryData.monthOrderEffectiveCount || 0}}</p>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </div>
    <div class="content3">
      <div class="c3-desc c3-desc-one c3-left">
        <dv-border-box-11 title="月度统计分析">
          <div class="c3-desc-inner">
            <!-- <div class="c3-desc-inner-wrap">
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-left">
                <chart11 ref="chart11" />
              </div>
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-right">
                <chart12 ref="chart12" />
              </div>
            </div> -->
            <chart16 ref="chart16" :chatData="msgData.orderDataSummaryByMonth" />
          </div>
        </dv-border-box-11>
      </div>
      <div class="c3-desc c3-right">
        <dv-border-box-11 title="游戏统计排行">
          <div class="c3-desc-inner">
            <!-- <div class="c3-desc-inner-wrap"> -->
            <!-- <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-left"> -->
            <dv-scroll-ranking-board v-if="config3.data.length>0" :config="config3" style="width:99%;height:100%;margin:0 auto;" />
            <!-- </div> -->
            <!-- <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-right">
                <chart13 ref="chart13" />
              </div> -->
            <!-- </div> -->
          </div>
        </dv-border-box-11>
      </div>
    </div>
    <div class="content3">
      <div class="c3-desc c3-left">
        <dv-border-box-11 title="物流活动信息">
          <div class="c3-desc-inner">
            <div class="c3-desc-inner-wrap">
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-left c3-desc-inner-wrap-item-rb">
                <!-- <dv-capsule-chart v-if="config.data.length>0" :config="config" style="width:100%;height:100%" /> -->
                <dv-scroll-ranking-board v-if="config.data.length>0" :config="config" style="width:95%;height:100%;margin:0 auto;" />
              </div>
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-right c3-desc-inner-wrap-item-b">
                <dv-scroll-board v-if="config2.data.length>0" ref="scrollBoard" :config="config2" style="width:100%;height:100%" />
              </div>
            </div>
          </div>
        </dv-border-box-11>
      </div>
      <div class="c3-desc c3-right">
        <dv-border-box-11 title="区域统计信息">
          <div class="c3-desc-inner">
            <div class="c3-desc-inner-wrap">
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-left">
                <Chart14 ref="chart14" :chatData="msgData.orderCountByArea" />
              </div>
              <div class="c3-desc-inner-wrap-item c3-desc-inner-wrap-right">
                <dv-active-ring-chart v-if="showRing&&config4.data.length>0" ref="ring" :config="config4" style="width:100%;height:100%" />
              </div>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </div>
  </div>
</template>

<script>
import Chart11 from "@/components/chart11.vue"
import Chart12 from "@/components/chart12.vue"
import Chart13 from "@/components/chart13.vue"
import Chart14 from "@/components/chart14.vue"
import Chart15 from "@/components/chart15.vue"
import Chart16 from "@/components/chart16.vue"
import { formatDate } from "@/utils"
import { Home } from "@/api/homePage"
import config from "@/config"
export default {
  name: 'wrapper',
  components: {
    Chart11,
    Chart12,
    Chart13,
    Chart14,
    Chart15,
    Chart16
  },
  data() {
    return {
      sreenWidth: 500,
      config: {
        data: [
          // {
          //   name: '南阳',
          //   value: 167
          // },
          // {
          //   name: '周口',
          //   value: 67
          // },
          // {
          //   name: '漯河',
          //   value: 123
          // },
          // {
          //   name: '郑州',
          //   value: 55
          // },
          // {
          //   name: '西峡',
          //   value: 98
          // }
        ]
      },
      config2: {
        headerBGC: "rgb(21, 33, 108)",
        columnWidth: [150, 120],
        header: ['编号', '数量', '时间'],
        data: [
          // ['1', '11', '2020-11-26'],
          // ['2', '22', '2020-11-26'],
          // ['3', '33', '2020-11-26'],
          // ['4', '44', '2020-11-26'],
          // ['5', '55', '2020-11-26'],
          // ['6', '66', '2020-11-26'],
          // ['7', '77', '2020-11-26'],
          // ['8', '88', '2020-11-26'],
          // ['9', '99', '2020-11-26']
        ]
      },
      config3: {
        data: [

        ]
      },
      config4: {
        data: [
          // {
          //   name: '周口',
          //   value: 55
          // },
          // {
          //   name: '南阳',
          //   value: 0
          // },
          // {
          //   name: '西峡',
          //   value: 0
          // },
          // {
          //   name: '驻马店',
          //   value: 0
          // },
          // {
          //   name: '新乡',
          //   value: 0
          // },
          // {
          //   name: '周口',
          //   value: 0
          // },
          // {
          //   name: '南阳',
          //   value: 0
          // },
          // {
          //   name: '西峡',
          //   value: 0
          // },
          // {
          //   name: '驻马店',
          //   value: 0
          // },
          // {
          //   name: '新乡',
          //   value: 0
          // },
          // {
          //   name: '周口',
          //   value: 0
          // },
          // {
          //   name: '南阳',
          //   value: 0
          // },
          // {
          //   name: '西峡',
          //   value: 0
          // },
          // {
          //   name: '驻马店',
          //   value: 0
          // },
          // {
          //   name: '新乡',
          //   value: 0
          // },
          // {
          //   name: '周口',
          //   value: 0
          // },
          // {
          //   name: '南阳',
          //   value: 0
          // },
          // {
          //   name: '西峡',
          //   value: 0
          // },
          // {
          //   name: '驻马店',
          //   value: 0
          // },
          // {
          //   name: '新乡',
          //   value: 0
          // },
        ],
        lineWidth: 10,
        radius: '80%',
        activeRadius: '88%'
      },
      showRing: true,
      websock: null,
      msgData: {
        summaryData: null,
        orderDataSummaryByMonth: null,
        orderCountByArea: []
      },
      number:0
    }
  },
  mounted() {
    this.getSreenWidth()
    this.resize()
    // this.getBigScreenData()
  },
  created() {
    this.initWebSocket();
  },
  computed: {
    isMobile() {
      if (this.sreenWidth <= 480) {
        return true
      } else {
        return false
      }
    }
  },
  destroyed() {
    this.websock.close() //离开路由之后断开websocket连接
  },
  methods: {
    newOrderCome() {
      if (this.$refs.audio) {
        this.$refs.audio.pause();
        this.$refs.audio.currentTime = 0;
        this.$refs.audio.play();
        console.log('mp3 play end')
      }
    },
    async getBigScreenData() {
      const data = await Home.getBigScreenData()
      this.msgData = data.data
      if (data.data&&data.data.logisticsInfo&&data.data.logisticsInfo.logissticsCountByArea && data.data.logisticsInfo.logissticsCountByArea.length > 0) {
        this.initConfig(data.data.logisticsInfo.logissticsCountByArea)
      }
      if (data.data&&data.data.logisticsInfo&&data.data.logisticsInfo.outletLogistics && data.data.logisticsInfo.outletLogistics.length > 0) {
        this.initConfig2(data.data.logisticsInfo.outletLogistics)
      }
      if (data.data&&data.data.gameOrderSort && data.data.gameOrderSort.length > 0) {
        this.initConfig3(data.data.gameOrderSort)
      }
      if (data.data&&data.data.orderCountByArea && data.data.orderCountByArea.length > 0) {
        this.initConfig4(data.data.orderCountByArea)
      }
    },
    initConfig(arr) {
      let cData = []
      this.config.data = []
      arr.forEach(item => {
        cData.push({
          name: item.cityName,
          value: item.orderCount || 0
        })
      })
      this.config.data = cData
    },
    initConfig2(arr) {
      let c2Data = []
      this.config2.data = []
      arr.forEach(item => {
        c2Data.push([item.outletId, item.totalQuantity, formatDate(item.logisticsOrderDate)])
      })
      this.config2.data = c2Data
    },
    initConfig3(gameOrderSort) {
      let c3Data = []
      this.config3.data = []
      gameOrderSort.forEach(item => {
        c3Data.push({
          name: item.gameName,
          value: item.gameQuantity || 0
        })
      })
      this.config3.data = c3Data
    },
    initConfig4(arr) {
      let c4Data = []
      this.config4.data = []
      arr.forEach(item => {
        c4Data.push({
          name: item.cityName,
          value: item.orderCount || 0
        })
      })
      this.config4.data = c4Data
    },
    doUpdate(rows, index = 0) {
      this.$refs['scrollBoard'].updateRows(rows, index)
    },
    resize() {
      window.onresize = () => {
        this.getSreenWidth()
        this.showRing = false
        // this.$refs.chart11.resize()
        this.$refs.chart16.resize()
        // this.$refs.chart13.resize()
        this.$refs.chart14.resize()
        // this.$refs.ring.resize()
        this.$nextTick(() => {
          this.showRing = true
        })
      };
    },
    getSreenWidth() {
      this.sreenWidth = document.body.clientWidth
    },
    initWebSocket() { //初始化weosocket
      console.log("初始化weosocket");

      // const wsuri = "ws://192.168.201.143:8080/doWebSocket/gaoyang";
      const wsuri = config.wsuri;
      // const wsuri = "ws://81.69.31.72/doWebSocket/gaoyang";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
      // let actions = { "test": "12345" };
      // this.websocketsend(JSON.stringify(actions));
      console.log("大屏通信 已打开");
    },
    websocketonerror() {//连接建立失败重连
      console.log('websocketonerror');
      this.initWebSocket();
    },
    websocketonmessage(msg) { //数据接收
      console.log('msg.data');
      console.log(msg.data);
      console.log('number '+this.number);
      if (msg != null) {
        if (msg.data.indexOf('连接成功') != 0) {
      
            console.log('mp3 play')
            this.newOrderCome()

          
          if(!msg.data){
            return
          }
          let data = JSON.parse(msg.data)
          this.msgData = data
          if (data.logisticsInfo&&data.logisticsInfo.logissticsCountByArea && data.logisticsInfo.logissticsCountByArea.length > 0) {
            this.initConfig(data.logisticsInfo.logissticsCountByArea)
          }
          if (data.logisticsInfo&&data.logisticsInfo.outletLogistics && data.logisticsInfo.outletLogistics.length > 0) {
            this.initConfig2(data.logisticsInfo.outletLogistics)
          }
          if (data.gameOrderSort && data.gameOrderSort.length > 0) {
            this.initConfig3(data.gameOrderSort)
          }
          if (data.orderCountByArea && data.orderCountByArea.length > 0) {
            this.initConfig4(data.orderCountByArea)
          }



        }


        // this.msgData = msg.data
        // setMessageInnerHTML(msg.data);
      }
    },
    websocketsend(Data) {//数据发送
      // this.websock.send(Data);
    },
    websocketclose(e) {  //关闭
      console.log('断开连接', e);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.full-screen {
  width: 100vw;
  height: 100vh;
  /* border: 10px solid red; */
  background-color: #081832;
  padding: 0 20px 0;
  box-sizing: border-box;
  position: relative;
}

.content1 {
  width: 100%;
  height: 10%;
}
.content1 .title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.content2 {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
}
.content3 {
  width: 100%;
  height: calc((100vh - 150px - 10% - 20px) / 2);
  display: flex;
  justify-content: space-between;
}
.c3-desc {
  width: 49%;
  height: 100%;
  box-sizing: border-box;
}
.c3-desc-inner {
  padding: 55px 15px 15px 15px;
  height: 100%;
}
.c3-desc-inner-wrap {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.c3-desc-inner-wrap-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* border: 1px solid red; */
}
/* .c3-desc-inner-wrap-item-rb {
  width: 35%;
}
.c3-desc-inner-wrap-item-b {
  width: 65%;
} */
.con_div {
  height: 110px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* margin-bottom: 25px; */
}
.con_div_text {
  height: 100%;
  background-color: rgb(21, 33, 108);
  width: 32%;
  /* margin-right: 1.3%; */
}
.con_div_text01 {
  width: 50%;
  height: 100%;
}
.text01_img {
  width: 40px;
  height: 40px;
  margin-left: 5%;
  margin-top: 35px;
}
.text01_div {
  margin-top: 15px;
  margin-left: 5%;
  text-align: center;
}
.text01_div p {
  line-height: 35px;
}
.text01_div p:nth-child(1) {
  font-size: 13px;
  color: #ffffff;
}
.text01_div p:nth-child(2) {
  font-size: 28px;
  color: #ffff43;
  font-weight: 600;
}

.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}

@media screen and (max-width: 480px) {
  .full-screen {
    height: auto;
    padding: 0 5px 20px;
  }
  .title {
    padding: 10px 0;
  }
  .content1 {
    height: auto;
  }
  .content2 {
    height: auto;
  }
  .content3 {
    display: block;
    height: auto;
  }
  .con_div {
    display: block;
    height: auto;
  }
  .con_div_text {
    width: 100%;
    float: none;
    height: 110px;
    margin-bottom: 10px;
  }

  .content3 .c3-desc {
    width: 100%;
    height: 160vw;
  }
  .content3 .c3-desc-one {
    height: 80vw;
  }

  .c3-desc-inner-wrap {
    display: block;
  }
  .c3-desc-inner-wrap-item {
    height: 50%;
  }
}
</style>
